<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <button id="replay">播放录像</button>
    <script>
        var ryu = {
            w: function() {
                console.log("前进");
            },
            a: function() {
                console.log("向左");
            },
            s: function() {
                console.log("向下");
            },
            d: function() {
                console.log("向右");
            },
        }
        commands = {
            '119': "w",
            '115': "s",
            '97': "a",
            '100': "d",
        }
        var makeCommand = function (receiver, state) {
            return function () {
                receiver[state]()
            }
        }
        var stack = []
        document.onkeypress = function (e) {
            var keyCode = e.keyCode,
            command = makeCommand(ryu, commands[keyCode])

            if(command) {
                command()
                stack.push(command)
            }
        }

        document.getElementById("replay").onclick = function () {
            // stack.forEach(item => {
            //     item()
            // })
            var command;
            while(command = stack.shift()) {
                command()
            }
        }
    </script>
</body>
</html>